<template>
<!-- 员工端订单 -->
  <div class="manager">
    <!-- 头部 -->
    
    <div class="header">
      <van-sticky>
        <van-nav-bar class="title" title="订单" />
      </van-sticky>
    </div>
    <!-- 标签页 -->
    <div class="content">
      <van-tabs v-model="active">
        <!-- 全部 -->
        <van-tab title="全部">
          <div class="card" v-for="order in orderAllData" :key="order.id">
            <div><img :src="order.customer.userFace" alt="" class="img" /></div>
            <div class="item">
              <span class="name">{{ order.customer.username }}</span>
              <span class="status">{{ order.status }}</span>
              <p class="address">
                {{
                  order.address.province +
                  order.address.city +
                  order.address.area +
                  order.address.address
                }}
              </p>
              <div class="date">
                <div style="float: left; font-size: 12px">
                  {{ order.orderTime | dateFormat }}
                </div>
                <div style="float: right; font-size: 12px">
                  ¥{{ order.total }}
                </div>
              </div>
            </div>
          </div>
          <!-- 待接单 -->
        </van-tab>
        <van-tab title="待接单">
          <div class="card" v-for="order in orderReceiveData" :key="order.id">
            <div><img :src="order.customer.userFace" alt="" class="img" /></div>
            <div class="item">
              <span class="name">{{ order.customer.username }}</span>
              <span class="status">{{ order.status }}</span>
              <p class="address">
                {{
                  order.address.province +
                  order.address.city +
                  order.address.area +
                  order.address.address
                }}
              </p>
              <div class="date">
                <div style="float: left; font-size: 12px">
                  {{ order.orderTime | dateFormat }}
                </div>
                <div style="float: right; font-size: 12px">
                  ¥{{ order.total }}
                </div>
              </div>
            </div>
          </div>
          <!-- 待服务 -->
        </van-tab>
        <van-tab title="待服务">
          <div class="card" v-for="order in orderserveData" :key="order.id">
            <div><img :src="order.customer.userFace" alt="" class="img" /></div>
            <div class="item">
              <span class="name">{{ order.customer.username }}</span>
              <span class="status">{{ order.status }}</span>
              <p class="address">
                {{
                  order.address.province +
                  order.address.city +
                  order.address.area +
                  order.address.address
                }}
              </p>
              <div class="date">
                <div style="float: left; font-size: 12px">
                  {{ order.orderTime | dateFormat }}
                </div>
                <div style="float: right; font-size: 12px">
                  ¥{{ order.total }}
                </div>
              </div>
            </div>
          </div>
          <!-- 已完成 -->
        </van-tab>
        <van-tab title="已完成">
          <div class="card" v-for="order in orderoverData" :key="order.id">
            <div><img :src="order.customer.userFace" alt="" class="img" /></div>
            <div class="item">
              <span class="name">{{ order.customer.username }}</span>
              <span class="status">{{ order.status }}</span>
              <p class="address">
                {{
                  order.address.province +
                  order.address.city +
                  order.address.area +
                  order.address.address
                }}
              </p>
              <div class="date">
                <div style="float: left; font-size: 12px">
                  {{ order.orderTime | dateFormat }}
                </div>
                <div style="float: right; font-size: 12px">
                  ¥{{ order.total }}
                </div>
              </div>
            </div>
          </div>
        </van-tab>
      </van-tabs>
      <div style="height: 80px"></div>
    </div>
  </div>
</template>

<script>
import { get, post, post_json } from "@/http/axios";
import moment from "moment";
import { mapMutations,mapState ,mapActions} from "vuex";
export default {
  data() {
    return {
      active: 0,
      orderoverData: [],
      orderAllData: [],
      orderserveData: [],
      orderReceiveData: [],
    };
  },
  computed:{
    ...mapState("user", ["userInfo"]),
  },
  methods: {
    ...mapActions("user", ["getUserInfo"]),
    //获取全部的订单数据
    async getAllOrder() {
      let data = {
        page: 1,
        pageSize: 100,
        employeeId:this.userInfo.id
      };
      let res = await get("/order/pageQuery", data);
      this.orderAllData = res.data.data.list;
    },
    // 获取待接单的订单数据
    async getReceiveOrder() {
      let data = {
        page: 1,
        pageSize: 100,
        status: "待接单",
        employeeId:this.userInfo.id
      };
      let res = await get("/order/pageQuery", data);
      //console.log(res.data.data.list)
      this.orderReceiveData = res.data.data.list;
    },
    // 获取待服务的订单数据
    async getserveOrder() {
      let data = {
        page: 1,
        pageSize: 100,
        status: "待服务",
        employeeId:this.userInfo.id
      };
      let res = await get("/order/pageQuery", data);
      //console.log(res.data.data.list)
      this.orderserveData = res.data.data.list;
    },
    // 获取已完成的订单数据
    async getOrderover() {
      let data = {
        page: 1,
        pageSize: 100,
        status: "已完成",
        employeeId:this.userInfo.id
      };
      let res = await get("/order/pageQuery", data);
      //console.log(res.data.data.list)
      this.orderoverData = res.data.data.list;
    },
    
  },
  created() {
    // 自动获取已完成的订单数据
    this.getOrderover();
    // 自动获取全部的订单数据
    this.getAllOrder();
    // 自动获取待服务的订单数据
    this.getserveOrder();
    // 自动获取待接单的订单数据
    this.getReceiveOrder();
    //this.getUserInfo().then(r)=>
    //获取员工用户的Id
    this.getUserInfo()
  },
};
</script>

<style scoped>
.header .title {
  width: 100%;
  height: 58px;
  background-image: linear-gradient(90deg, #bf73ff, #7579ff);
  text-align: center;
  line-height: 58px;
  color: #fff;
  letter-spacing: 0.4em;
}
.content .card {
  width: 80%;
  height: 80px;
  margin: 0 auto;
  box-shadow: 0 0 6px 0 #ccc;
  display: flex;
  padding: 1em 1em;
  border-radius: 5px;
  margin-bottom: 20px;
}
.content .card .img {
  width: 80px;
  height: 80px;

  border-radius: 50%;
}
.content .card .item {
  margin-left: 1em;
  flex: 2;
  height: 80px;
}
.content .card .status {
  float: right;
  font-size: 11px;
  color: #f8825d;
}
.content .card .address {
  font-size: 12px;
  margin-top: 1em;
  color: #666;
}
</style>